<div class="da-list-wrap">
  <div class="da-content-banner">
    <d-breadcrumb>
      <d-breadcrumb-item><a routerLink="/">{{ 'product.breadcrumb.home' | translate }}</a></d-breadcrumb-item>
      <d-breadcrumb-item><a routerLink="/pages/product/productJob">{{ 'product.breadcrumb.productJob' | translate }}</a>
      </d-breadcrumb-item>
      <d-breadcrumb-item>{{ 'product.breadcrumb.productJobDetail' | translate }}</d-breadcrumb-item>
    </d-breadcrumb>
  </div>
  <div class="da-content">
    <div class="card">
      <div class="card-title">
        <p class="form-title">工单号：{{this.jobOrderDetail.jobNum}}</p>
      </div>
      <div class="card-body">
        <div class="details">
          <d-panel #basic [isCollapsed]="isCollapsed.basic" [showAnimation]="true" [hasLeftPadding]="false"
            class="mt-5">
            <d-panel-header>
              <div>
                <h4>
                  基础信息<em class="icon icon-select-arrow" [ngClass]="{ open: !basic.isCollapsed }"></em>
                </h4>
              </div>
            </d-panel-header>
            <d-panel-body>
              <div class="basic">
                <div class="basic-item">
                  <label>工单号:</label>
                  <div class="basic-item-data">
                    <span>{{this.jobOrderDetail.jobNum}}</span>
                  </div>
                </div>
                <div class="basic-item">
                  <label>工单类型:</label>
                  <span>{{this.jobOrderDetail.jobOrderType}}</span>
                </div>
                <div class="basic-item">
                  <label>销售单号:</label>
                  <span>{{this.jobOrderDetail.saleOrderNum}}</span>
                </div>
                <div class="basic-item">
                  <label>产品编码:</label>
                  <span>{{this.jobOrderDetail.productNum}}</span>
                </div>
                <div class="basic-item">
                  <label>产品名称:</label>
                  <span>{{this.jobOrderDetail.productName}}</span>
                </div>
                <div class="basic-item">
                  <label>物料规格:</label>
                  <span>{{this.jobOrderDetail.partType}}</span>
                </div>
                <div class="basic-item">
                  <label>物料单位:</label>
                  <span>{{this.jobOrderDetail.uom}}</span>
                </div>
                <div class="basic-item">
                  <label>计划生产数量:</label>
                  <span>{{this.jobOrderDetail.productionQuantity}}</span>
                </div>
                <div class="basic-item">
                  <label>计划开始时间:</label>
                  <span>{{this.jobOrderDetail.jobOrderPlanStartDate | date:"yyyy-MM-dd"}}</span>
                </div>
                <div class="basic-item">
                  <label>计划结束时间:</label>
                  <span>{{this.jobOrderDetail.jobOrderPlanEndDate | date:"yyyy-MM-dd"}}</span>
                </div>
                <div class="basic-item">
                  <label>实际开始时间:</label>
                  <span>{{this.jobOrderDetail.jobOrderActualStartDate | date:"yyyy-MM-dd"}}</span>
                </div>
                <div class="basic-item">
                  <label>实际结束时间:</label>
                  <span>{{this.jobOrderDetail.jobOrderActualEndDate | date:"yyyy-MM-dd"}}</span>
                </div>
                <div class="basic-item">
                  <label>已入库数量:</label>
                  <span>{{this.jobOrderDetail.receivedQuantity}}</span>
                </div>
                <div class="basic-item">
                  <label>生产进度:</label>
                  <d-progress
                    [percentage]="(this.jobOrderDetail.receivedQuantity/this.jobOrderDetail.productionQuantity)*100">
                    <ng-template [dPosition]="'center'">
                      <div class="overflow-ellipsis"
                        [title]="this.jobOrderDetail.receivedQuantity+'/'+ this.jobOrderDetail.productionQuantity">
                        {{ this.jobOrderDetail.receivedQuantity }}/{{this.jobOrderDetail.productionQuantity}}</div>
                    </ng-template>
                  </d-progress>
                </div>
                <div class="basic-item">
                  <label>状态:</label>
                  <div class="basic-item-data">
                    <d-tag [tag]=" jobOrderDetail?.isApproval | isApproval" [labelStyle]="jobOrderDetail?.isApproval"
                      class="me-2"></d-tag>
                    <d-tag [tag]=" jobOrderDetail?.isAssign | isAssign" [labelStyle]="jobOrderDetail?.isAssign"
                      class="me-2"></d-tag>
                    <d-tag [tag]=" jobOrderDetail?.isFinished | isFinished" [labelStyle]="jobOrderDetail?.isFinished"
                      class="me-2"></d-tag>
                    <d-tag [tag]=" jobOrderDetail?.isLocked | isLocked" [labelStyle]="jobOrderDetail?.isLocked"
                      class="me-2"></d-tag>
                  </div>
                </div>
              </div>
            </d-panel-body>
          </d-panel>
          <d-panel #process [isCollapsed]="isCollapsed.process" [showAnimation]="true" [hasLeftPadding]="false">
            <d-panel-header>
              <div>
                <h4>
                  工序详情<em class="icon icon-select-arrow" [ngClass]="{ open: !process.isCollapsed }"></em>
                </h4>
              </div>
            </d-panel-header>
            <d-panel-body>
              <div class="process">
                <div class="process-item" *ngFor="let item of jobOrderDetail.jobOrderProcesses"
                  (click)="getjobOrderProcessId(item.processId)">
                  <div class="process-item-title">
                    <div class="process-item-title-left">
                      <span class="me-2 title">{{item.processName}}</span>
                      <span class="me-1" *ngIf="item.isFirstInspection">
                        <d-tag [tag]="'首' " [labelStyle]="'tag-custom1'"></d-tag>
                      </span>
                      <span class="me-1" *ngIf="item.isInspection">
                        <d-tag [tag]="'检' " [labelStyle]="'tag-custom1'"></d-tag>
                      </span>
                      <span class="me-1" *ngIf="item.isOutsourcing">
                        <d-tag [tag]="'外' " [labelStyle]="'tag-custom2'"></d-tag>
                      </span>
                      <span class="me-1" *ngIf="!item.isOutsourcing">
                        <d-tag [tag]="'制' " [labelStyle]="'tag-custom'"></d-tag>
                      </span>
                    </div>
                    <span class="me-1 mt-1" *ngIf="item.isFinished">
                      <d-status type="success">已完工</d-status>
                    </span>
                    <span class="me-1 mt-1" *ngIf="item.isStart&&!item.isFinished">
                      <d-status type="running">已开工</d-status>
                    </span>
                    <span class="me-1 mt-1" *ngIf="!item.isStart">
                      <d-status type="warning">未开工</d-status>
                    </span>
                    <span class="me-1 mt-1" *ngIf="item.isPause">
                      <d-status type="canceled">暂停中</d-status>
                    </span>
                  </div>
                  <div class="process-Unit-hour">
                    <span>工序序号：</span>
                    <span>{{item.processNumber}}</span>
                  </div>
                  <div class="process-Unit-hour">
                    <span>工序编码：</span>
                    <span>{{item.processNum}}</span>
                  </div>
                  <div class="process-Unit-hour">
                    <span>单位工时：</span>
                    <span>{{item.standardWorkingHours}}</span>
                    <span>{{item.workingHoursUnit}}</span>
                  </div>
                  <div class="process-Unit-hour">
                    <span>总工时：</span>
                    <span>{{item.totalWorkingHours}}</span>
                    <span>{{item.workingHoursUnit}}</span>
                  </div>
                  <div class="process-Unit-hour">
                    <span>生产进度：</span>
                    <d-progress [percentage]="(item.qualifiedAmount/item.productionQuantity)*100">
                      <ng-template [dPosition]="'center'">
                        <div class="overflow-ellipsis" [title]="item.qualifiedAmount+'/'+ item.productionQuantity">
                          {{item.qualifiedAmount }}/{{item.productionQuantity}}</div>
                      </ng-template>
                    </d-progress>
                  </div>
                  <div class="process-Unit-hour">
                    <span>计划开始时间：</span> <span>{{item.planStartTime | date:"yyyy-MM-dd HH:mm:ss"}}</span>
                  </div>
                  <div class="process-Unit-hour">
                    <span>计划结束时间：</span><span>{{item.planFinishTime | date:"yyyy-MM-dd HH:mm:ss"}}</span>

                  </div>
                  <div class="process-Unit-hour">
                    <span>实际开始时间：</span> <span>{{item.actualStartTime | date:"yyyy-MM-dd HH:mm:ss"}}</span>
                  </div>
                  <div class="process-Unit-hour">
                    <span>实际结束时间：</span> <span>{{item.actualFinishTime | date:"yyyy-MM-dd HH:mm:ss"}}</span>
                  </div>
                </div>
              </div>
            </d-panel-body>
          </d-panel>
          <d-panel #material [isCollapsed]="isCollapsed.material" [showAnimation]="true" [hasLeftPadding]="false"
            class="material">
            <d-panel-header>
              <div>
                <h4>
                  物料列表<em class="icon icon-select-arrow" [ngClass]="{ open: !material.isCollapsed }"></em>
                </h4>
              </div>
            </d-panel-header>
            <d-panel-body>
              <div class="material mt-5">
                <div class="table">
                  <d-data-table [dataSource]="Material" [lazy]="true" [scrollable]="true" [fixHeader]="true"
                    [tableOverflowType]="'auto'" [scrollable]="true" [resizeable]="true">
                    <thead dTableHead>
                      <tr dTableRow>
                        <th dHeadCell>工序编码</th>
                        <th dHeadCell>工序名称</th>
                        <th dHeadCell>物料编码</th>
                        <th dHeadCell>物料名称</th>
                        <th dHeadCell>单位用量</th>
                        <th dHeadCell>单位</th>
                        <th dHeadCell>损耗率(%)</th>
                        <th dHeadCell>单位损耗数量</th>
                        <th dHeadCell>固定损耗</th>
                        <th dHeadCell>是否固定数量</th>
                        <th dHeadCell>需求数量</th>
                        <th dHeadCell>已发数量</th>
                        <th dHeadCell>状态</th>
                      </tr>
                    </thead>
                    <tbody dTableBody>
                      <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
                        <tr dTableRow>
                          <td dTableCell>
                            <span dTooltip [content]="rowItem.processNum">{{rowItem.processNum}}</span>
                          </td>
                          <td dTableCell>
                            <span dTooltip [content]="rowItem.processName">{{rowItem.processName}}</span>
                          </td>
                          <td dTableCell>
                            <span dTooltip [content]="rowItem.partNum">{{rowItem.partNum}}</span>
                          </td>
                          <td dTableCell>
                            <span dTooltip [content]="rowItem.partName">{{rowItem.partName}}</span>
                          </td>
                          <td dTableCell>
                            <span dTooltip [content]="rowItem.unitUsage">{{rowItem.unitUsage}}</span>
                          </td>
                          <td dTableCell>
                            <span dTooltip [content]="rowItem.unit">{{rowItem.unit}}</span>
                          </td>
                          <td dTableCell>
                            <span *ngIf="rowItem.isPercentage" dTooltip
                              [content]="rowItem.lossRate * 100 + '%'">{{rowItem.lossRate * 100}}%</span>
                          </td>
                          <td dTableCell>
                            <span *ngIf="!rowItem.isPercentage && rowItem.fixedLoss === 0" dTooltip
                              [content]="(rowItem.lossRate * 100) + '%'">{{rowItem.lossRate * 100}}%</span>
                          </td>
                          <td dTableCell>
                            <span *ngIf="rowItem.fixedLoss > 0" dTooltip
                              [content]="rowItem.fixedLoss">{{rowItem.fixedLoss}}</span>
                          </td>
                          <td dTableCell>
                            <span dTooltip
                              [content]="rowItem.isFixedQuantity | YesOrNo">{{rowItem.isFixedQuantity | YesOrNo}}</span>
                          </td>
                          <td dTableCell>
                            <span dTooltip
                              [content]="rowItem.requirementQuantity">{{rowItem.requirementQuantity}}</span>
                          </td>
                          <td dTableCell>
                            <span dTooltip [content]="rowItem.issuedQuantity">{{rowItem.issuedQuantity}}</span>
                          </td>
                          <td dTableCell *ngIf="rowItem.isIssueFinished">
                            <span dTooltip [content]="'发料完成'">发料完成</span>
                          </td>
                          <td dTableCell *ngIf="!rowItem.isIssueFinished">
                            <span dTooltip [content]="'发料未完成'">发料未完成</span>
                          </td>
                        </tr>
                      </ng-template>
                    </tbody>
                  </d-data-table>
                </div>

              </div>
            </d-panel-body>
          </d-panel>
        </div>
        <div class="cancle">
          <d-button class="ms-3" bsStyle="common" (btnClick)="cancel()">返回</d-button>
        </div>
      </div>
    </div>
  </div>
</div>
